<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
<title>摄像头</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rotate.js"></script>
</head>
<script type="text/javascript">
	var imgSrc = "${ctx}/download?p=${param['p']}";	// /?action=snapshot"
	var resize = true;
	var isupdate = true;
	var uploadNO = false;
	var initImg = false;
	function findDimensions() {  //函数：获取尺寸
		var winWidth = 0;
		var winHeight = 0;
		//获取窗口宽度
		if (window.innerWidth) {
			winWidth = window.innerWidth;
		} else if ((document.body) && (document.body.clientWidth)) {
			winWidth = document.body.clientWidth;
		}
		
		//获取窗口高度
		if (window.innerHeight) {
			winHeight = window.innerHeight;
		} else if ((document.body) && (document.body.clientHeight)) {
			winHeight = document.body.clientHeight;
		}
		
		//通过深入Document内部对body进行检测，获取窗口大小
		if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
			winHeight = document.documentElement.clientHeight;
			winWidth = document.documentElement.clientWidth;
		}
		return {width:winWidth,height:winHeight};
	}

	$(function() {
		window.setInterval(function() {
			upload();
		}, 1000);
		//alert(win.width + ":" + win.height);
		$("#showImg").bind("load",function() {
			resizeImg();
			isupdate = true;
			initImg = true;
		}).click(function() {
			//$("#showImg").rotate(90);
			resize = true;
			uploadNO=!uploadNO;
		});		
	});
	//调整图片大小
	function resizeImg() {
		if(!resize) return;
		var $showImg = $("#showImg");
		var win = findDimensions();
		var imgW = $showImg.width();
		var imgH = $showImg.height();
		
		if(imgW == null || imgH == null) return;
		
		if((imgW - win.width) < 0 && (imgH - win.height) < 0) {
			if(imgW/imgH < win.width/win.height) {
				$showImg.attr("height", win.height);
				$showImg.removeAttr("width");
			} else {
				$showImg.attr("width", win.width);
				$showImg.removeAttr("height");
			}
		} else if(imgW - win.width < imgH - win.height) {
			$showImg.attr("height", win.height);
			$showImg.removeAttr("width");
		} else if(imgW - win.width > imgH - win.height) {
			$showImg.attr("width", win.width);
			$showImg.removeAttr("height");
		} else {
			
		}
		$showImg.css("left", (win.width - $showImg.get(0).clientWidth)/2 + "px").css("top", (win.height - $showImg.get(0).clientHeight)/2 + "px");
		resize = false;
	}
	

	function imageOnclick() { // Clicking on the image will pause the stream
	 	$("#showImg").rotate(90);		
	}

	//调用函数，获取数值
	window.onresize = function(){
		resize = true;
	};

	function upload() {
		if(!isupdate)return;
		if(uploadNO || !initImg) {
			$.ajax({
				url:"${ctx}/isdownload?p=${param['p']}",
				cache:false,
				success:function(res) {
					if(res == "YES") {
						isupdate = false;
						$("#showImg").attr("src", imgSrc + "&v=" + (new Date()).getTime());
					}
				}
			});
		}
	}
</script>
<body>
	<img id="showImg" style="position: absolute;"/>
</body>
</html>
